<div class="container-fluid">
    <table class="table table-hover" style="width: 100%;">
        <thead>
            <tr>
                <th>id</th>
                <th>头像</th>
                <th>昵称</th>
                <th>用户名</th>
                <th>Phone</th>
                <th>Email</th>
                <th>注册时间</th>
                <th>上次登录</th>
                <th>状态</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody>
            {% for item in root %}
            <tr>
                <td>{{ item.id }}</td>
                {% if item.face %}
                <td>{{ item.face }}</td>
                {% else %}
                <td><i class="fa-solid fa-face-smile"></i></td>
                {% endif %}
                <td>{{ item.nicename }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.phone }}</td>
                <td>{{ item.email }}</td>
                <td>{{ item.creattime }}</td>
                <td>{{ item.lasttime }}</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="darkmode" value="yes" 
                        {% if item.status %}
                        checked
                        {% endif %}
                        >
                    </div>
                </td>
                <td>
                    <button type="button" class="btn btn-success btn-sm">编辑权限</button> 
                    <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#myModal" data-idx="{{item.id}}" onfocusin="doSetTargetID(this);">编辑密码</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>


<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">修改密码</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
                    <input type="hidden" id="change-pswd-target">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="p-2 confirm-warning" id="change-pswd-alert" style="display: none;">密码校验失败</label>
                    </div>                    
                    <div class="mb-3 mt-3">
                        <label class="form-label">Password:</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa-duotone fa-solid fa-lock"></i></span>
                            <input type="password" class="form-control change-pswd" placeholder="Enter password" onblur="doChangePswdConfirm();">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Confirm Password:</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa-duotone fa-solid fa-lock"></i></span>
                            <input type="password" class="form-control change-pswd" placeholder="Enter password" onblur="doChangePswdConfirm();">
                        </div>
                    </div>
                    
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="change-pswd-save" onclick="doChangePswdSave();">保存</button>
                <button type="button" class="btn btn-danger" id="change-pswd-stop" data-bs-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>